<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script>
			function getData(url) {
				const pro = new Promise((resolve, reject) => {
					// 1. 创建 xhr 对象
					let xhr = new XMLHttpRequest()

					// 2. 配置请求方式和地址
					xhr.open('GET', url)

					// 3. 开始发送请求
					xhr.send()

					// 4. 接收结果
					xhr.onreadystatechange = function () {
						if (xhr.readyState !== 4) return
						if (xhr.readyState === 4 && xhr.status === 200) {
							resolve(xhr.responseText)
						} else {
							reject('服务器端错误')
						}
					}
				})

				return pro
			}

			// then 方法可以返回两种值
			// 1. 返回的是 Promise 实例对象
			//  => 会调用下一个 then 接收到返回的结果

			// 2. 返回的是 一个字符串
			//  => 如果返回的是一个字符串，在下一个 then 中还是能够调用
			//  => 这是因为 Promise 会默认初始化一个实例对象，从而将字符串传递给下一个 then

			// 结论：无论返回的是一个字符串还是一个 Promise 实例对象，在下一个 then 中都能访问到

			getData('http://127.0.0.1:3000/data')
				.then((data) => {
					console.log(data)

					return getData('http://127.0.0.1:3000/data1')
				})
				.then((data) => {
					// 这个 then 是上一个异步操作中返回的异步程序调用的
					console.log(data)

					return '虞姬'
				})
				.then((data) => {
					console.log(data)
				})
		</script>
	</body>
</html>
